<template>
	<view @click="inputBlur">
		<!-- 广场内容 -->
		<view class="square-items" v-for="(squareItem,index) in squareInfo">
			<view class="title-area">
				<view class="avatar">
					<u-avatar :src="squareItem.user_avatar"></u-avatar>
				</view>
				<view class="name-date">
					<view class="user-name">{{squareItem.user_name}}</view>
					<view class="square-date">{{squareItem.square_date | dateFormatWithoutYear}}</view>
				</view>
			</view>
			<view class="content-area">
				<view class="word">{{squareItem.square_content}}</view>
				<view class="imgs">
					<image class="img" :src="picItem.pic_url" v-for="(picItem,index2) in squareItem.pic_list"
						@click.stop="previewImg(picItem.pic_url,squareItem.pic_list)"></image>
				</view>
			</view>
		</view>
		<!-- 分隔线 -->
		<view class="seperate"></view>
		<!-- 评论区 -->
		<view class="comment-area">
			<view class="title">
				<view class="comment-total">评论区
					<text v-if="commentList[0].commentTotal">{{commentList[0].commentTotal}}</text>
					<text v-else>0</text>
				</view>
				<view class="sort-way">
					<view :class="activeSort?'hot active-color':'hot passive-color'"
						@click="getCurrentCommentSortByHot">热门</view>
					<view class="line"> | </view>
					<view :class="activeSort==0?'date active-color':'date passive-color'"
						@click="getCurrentCommentSortByDate"> 时间</view>
				</view>
			</view>
			<commentItem :commentItems="commentList"></commentItem>
		</view>
		<!-- 底部评论bar -->
		<comment-input :praiseTotal="commentList.praiseTotal"></comment-input>
	</view>
</template>

<script>
	import commentItem from '../../components/comment/comment.vue'
	import commentInput from '../../components/commentInput/commentInput.vue'
	export default {
		components: {
			commentItem,
			commentInput
		},
		data() {
			return {
				// 广场信息
				squareInfo: {},
				// 广场id
				squareId: 0,
				// 评论列表
				commentList: [],
				// 当前评论是否根据热度排序
				currentCommentSortByHot: true,
				// 当前激活的排序方式
				activeSort: 1,

			};
		},
		onLoad(item) {
			this.squareId = item.id
			this.getSquareInfo(item.id)
			this.getCommentInfo(item.id)
			uni.setStorageSync("squareId",item.id)
		},
		methods: {
			inputBlur(){
				uni.$emit("commentInput","inputBlur")
			},
			// 获取广场信息
			getSquareInfo(id) {
				uni.request({
					url: 'http://1.116.242.41:4000/square/squareById',
					data: {
						squareId: id
					},
					success: (res) => {
						this.squareInfo = res.data.data
					
					},
					fail: (err) => {
						console.log('获取广场内容失败')
					}
				})
			},
			// 预览图片
			previewImg(img, imgs) {
				let picUrls = imgs.map((item) => {
					return item.pic_url
				})

				uni.previewImage({
					current: img,
					urls: picUrls,
					loop: true,
					indicator: true
				})
			},
			// 获取评论信息
			getCommentInfo(id) {
				if (this.currentCommentSortByHot) {
					uni.request({
						url: 'http://1.116.242.41:4000/square/comment',
						data: {
							squareId: id,
							sort: 1
						},
						success: (res) => {
							this.commentList = res.data.data
							
						},
						fail: (err) => {
							console.log('获取评论内容失败')
						}
					})
				} else {
					uni.request({
						url: 'http://1.116.242.41:4000/square/comment',
						data: {
							squareId: id,
							sort: 0
						},
						success: (res) => {
							this.commentList = res.data.data
						
						},
						fail: (err) => {
							console.log('获取评论内容失败')
						}
					})
				}
			},
			// 根据时间排序展示评论内容
			getCurrentCommentSortByDate() {
				this.currentCommentSortByHot = false
				this.activeSort = 0
				this.getCommentInfo(this.squareId)
			},
			// 根据热度排序展示评论内容
			getCurrentCommentSortByHot() {
				this.currentCommentSortByHot = true
				this.activeSort = 1
				this.getCommentInfo(this.squareId)
			},

		},
		onReady() {
			uni.$on("dynamic",msg=>{
				if(msg == "updateComment") {
					this.getCommentInfo(uni.getStorageSync("squareId"))
				}
			})
		}
	}
</script>

<style lang="scss">
	.square-items {
		width: 750rpx;
		margin: 0 auto;
		padding: 20rpx 20rpx;
		background-color: #FAFAFA;

		.title-area {
			display: flex;
			align-items: center;

			.avatar {
				margin-right: 20rpx;
			}

			.name-date {
				display: flex;
				flex-direction: column;

				.square-date {
					font-size: 23rpx;
					color: gray;
				}
			}
		}

		.content-area {
			margin: 10rpx 0;

			.word {
				margin-bottom: 20rpx;
			}

			.imgs {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.img {
					width: 233rpx;
					height: 233rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}
			}

		}

	}

	.seperate {
		width: 750rpx;
		border-bottom: solid 20rpx #F1F1F1;
	}

	.comment-area {
		width: $unit-box-width;
		padding: 20rpx 0 300rpx 0;
		margin: 0 auto;
		background-color: #FAFAFA;

		.title {
			display: flex;
			justify-content: space-between;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			margin-bottom: 20rpx;

			.sort-way {
				display: flex;

				.line {
					padding: 0 10rpx;
					font-weight: normal;
				}

				.date {
					color: gray;
				}

				.active-color {
					color: black !important;
				}

				.passive-color {
					color: gray !important;
				}
			}
		}
	}
</style>
